<template>
  <div>

    <div class="login" id="apply">
        <div class="login_bg" >
            <div class="log_logo">
                <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/logo.png">
            </div>
            <!-- 验证码登录 -->
            <div class="pd_log">

                <div class="pdlog_one">
                    <div class="pdl_top">
                        <div class="pdl_side">
                            <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/name.png"> 手机号
                        </div>
                        <div class="pdl_cont">
                            <input
                                    type="number"
                                    v-model.number="ReginForm.tel"
                                    placeholder="请输入你的手机号" @focus="inputFocus()" @focusout="inputFocusOut"/>
                        </div>
                    </div>
                    <div class="pdl_top">
                        <div class="pdl_side">
                            <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/yxz.png"> 验证码
                        </div>
                        <div class="pdl_conts">
                            <input type="text" placeholder="请输入验证码" v-model="verification" class="pdl_conts-input" @focus="inputFocus()" @focusout="inputFocusOut"/>
                            <input type="text" class="pdls_btn" v-show="sendAuthCode" @click="getAuthCode" value="获取验证码" :disabled="!ReginForm.tel"/>
                            <span v-show="!sendAuthCode" class="pdls_btn">
                            <span class="pdls_btn2">{{auth_time}}</span> 秒后发送</span>
                        </div>
                    </div>
                    <div class="pdlog_two">
                        <button
                                type="success"
                                round
                                v-on:click="submit"
                                @click.native.prevent="submit"
                                :loading="logining"
                                :disabled="!verification" :class="verification ? 'yf_submitBtn' : 'submitBtn'">
                            确定
                        </button>
                        <p>* 新用户注册立即获得15.8元现金</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--弹出框-->
    <!--<div v-if="show" class="show">-->
      <!--<van-loading type="spinner" color="#01bf47"/>-->
    <!--</div>-->
  </div>
</template>

<script>
    import Rule from '../../common/validate.js';

    export default {
        name: "bindOrRegister",
        data() {
            return {
                ReginForm: {tel: '',},
                logining: false,
                sendAuthCode: true, /*布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */
                auth_time: 0, /*倒计时 计数器*/
                verification: "",//绑定输入验证码框框
                rule: {
                    tel: [
                        {required: true, message: '请输入电话号码', trigger: 'blur'},
                        {validator: Rule.checkNull, trigger: 'blur'},
                        {validator: Rule.checkTszf, trigger: 'blur'},
                        {validator: Rule.checkCellPhone, trigger: 'blur'}
                    ],
                },
              timer:null,
              show: false,
              showLogin:false,
            }
        },
      created(){
        setTitle('登录');
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.onresize = function() {
          var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (clientHeight - nowClientHeight > 60 ) {//因为ios有自带的底部高度
            //键盘弹出的事件处理
            document.getElementById("apply").classList.add("focusState");
          }
          else {
            //键盘收起的事件处理
            document.getElementById("apply").classList.remove("focusState");
          }
        };
      },
        methods: {
          inputFocus(){
            if(this.timer){
              clearTimeout(this.timer)
            }
          },
          inputFocusOut(){
            this.timer = setTimeout(() => {
              window.scrollTo(0,0)
            },10)
          },
            //  验证
            getAuthCode: function () {
                const mobile = this.ReginForm.tel;
                // 获取验证码请求
                const url = '/api/common/v1/sms/pwd?' + 'mobile=' + mobile + '&country_code=86'
                console.log("url", url);
                this.$axios.post(url, {emulateJSON: true}).then(function (response) {
                    console.log("请求成功", response)
                }, function (error) {
                    console.log(error.response.data);
                    console.log("请求失败", error);
                })
                this.sendAuthCode = false;
                //设置倒计时秒
                this.auth_time = 60;
                var auth_timetimer = setInterval(() => {
                    this.auth_time--;
                    if (this.auth_time <= 0) {
                        this.sendAuthCode = true;
                        clearInterval(auth_timetimer);
                    }
                }, 1000);
            },
            // 封装注册发送请求方法,验证验证码
          async thisAjax() {
                var _this = this;
                const phoneData = this.ReginForm.tel;
                const mCodeData = this.verification;
                let beforeLoginUrl = localStorage.getItem('beforeLoginUrl');
                var list = JSON.parse(localStorage.getItem('wxUserInfo'));
                this.list = list;
                var shareId = localStorage.getItem('shareId');
                var productId = localStorage.getItem('goodsId');
                var type=localStorage.getItem('loginType');
                let urlUser_id=localStorage.getItem('urlUser_id');

                //  手机注册
                //emulateJSON:true设置后post可跨域
                //const url = "/api/common/v1/system/sms-login?"+'phone='+phoneData+'&password='+mCodeData+'&type=3' + '&language=zh&openid='+ list.unionid + '&nickname='+list.nickname + '&avatar='+list.headimgurl;
            let params={
              phone: phoneData,
              password: mCodeData,
              type: type,
              language: 'zh',
              openId: list!=null?list.unionid:'',
              unionId: list!=null?list.openid:'',
              nickname: list!=null?list.nickname:'',
              avatar: list!=null?list.headimgurl:'',
              fxUserId:urlUser_id||'',
              shareId: shareId,
              productId: productId,
            };
              const data = await this.$axios.post(this.$api.smsLogin, params);
            if (data.success) {
              console.log(data)
              localStorage.setItem('userInfo', JSON.stringify(data.data));
              _this.getToken(data.data.clientId, data.data.clientSecret,decodeURIComponent(beforeLoginUrl))
              // _this.$router.push({path: decodeURIComponent(beforeLoginUrl)})
            } else {
              console.log(data);
              console.log("绑定失败");
            }
            },
            // 提交数据
            submit() {
                this.logining = true;
                this.thisAjax();
            },
            getToken(clientId, clientSecret,beforeLoginUrl){
                let params = {
                    url:"http://slapi.zjc158.com/searched-api",
                    clientId:clientId,
                    clientSecret:clientSecret,
                };
                let res=this.$axios.post(this.$api.getoken, params
                  // {
                    // headers: {
                    //     'Authorization': this.make_base_auth(clientId, clientSecret)
                    // }
                // }
                );
                //console.log(this.make_base_auth(clientId, clientSecret));
                res.then(res => {
                    console.log(res);
                    localStorage.setItem('token',res.data.value);
                    this.$router.push({path: decodeURIComponent(beforeLoginUrl)})
                }).catch(error => {

                });
            },//base_auth验证
            // make_base_auth(user, password) {
            //     let Base64 = require('js-base64').Base64;
            //     var tok = user + ':' + password;
            //     var hash = Base64.encode(tok);
            //     return "Basic " + hash;
            // },
            async userInfo(){

                let params = {
                    params: {
                        code: this.$base.getQueryString("code"),
                        type:1
                        // isAll: 1
                    }
                };
                console.log(params);
                const res=await this.$axios.get(this.$api.toWxActivity, params);
                console.log(res);

                if(res.success && res.code==""){
                    localStorage.setItem('loginType',3);
                    let beforeLoginUrl = localStorage.getItem('beforeLoginUrl');
                    localStorage.setItem('userInfo', JSON.stringify(res.data));
                    this.getToken(res.data.clientId, res.data.clientSecret,beforeLoginUrl);
                    // }
                }else if(res.code=="-1"){
                    localStorage.setItem('loginType',1);
                    localStorage.setItem('wxUserInfo', JSON.stringify(res.data));
                    console.log(res);
                }


            },

            reset() {
                this.$refs.ReginForm.resetFields()
            },
        },
        beforeCreate:function(){

        },
        mounted() {

             this.userInfo();

        },
      destroyed(){
        if(this.timer){
          clearTimeout(this.timer)
        }
      }

    }


</script>

<style scoped>
  .focusState {position: absolute;}
  .show{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 120;
    position: fixed;
    top: 0;
    left: 0;
  }
  /deep/.van-loading{
    width: 50px;
    height: 50px;
    z-index: 0;
    font-size: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    margin: 60% auto;
  }
    .login {
        width: 100%;
        background-image: url("https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/login_bg.png");
        background-size: 100% 100%;
        height: 100%;
        min-height: 100vh;
    }

    .log_logo {
        width: 35%;
        margin: 0 auto;
    }

    .log_logo img {
        width: 100%;
        padding-top: 1rem;
    }

    .pdl_top {
        width: 90%;
        margin: 0 auto 0.1rem;
        background-color: rgba(192, 192, 192, 0.5);
        height: 0.4rem;
        overflow: hidden;
    }

    .pdl_side {
        width: 25%;
        padding-left: 0.1rem;
        border-right: 1px solid #efefef;
        float: left;
        color: white;
        font-size: 0.14rem;
        line-height: 0.3rem;
        margin-top: 0.05rem;
    }

    .pd_log {
        padding-top: 0.7rem;
        font-size: 0;
    }

    .pdl_side img {
        width: 0.2rem;
        position: relative;
        top: 0.05rem;
    }

    .pdl_cont input {
        height: 0.4rem;
        width: 100%;
        background-color: hsla(0, 0%, 47%, .1);;
        outline: none;
        border: 0;
        font-size: 0.14rem;
        position: relative;
        top: 0;
        left: 0.1rem;
        color: white;
    }

    .pdl_cont input::-webkit-input-placeholder {
        color: #FFF;
        font-size: 0.14rem;
    }

    .ic_name {
        width: 0.5rem;
        position: relative;
        top: 0.1rem;
    }

    .pdl_cont {
        width: 65%;
        float: left;
    }

    .pdl_conts {
        width: 73%;
        float: left
    }

    .pdl_conts-input {
        height: 0.4rem;
        width: 55%;
        background-color: hsla(0, 0%, 47%, .1);
        outline: none;
        border: 0;
        font-size: 0.14rem;
        margin-left: 0.1rem;
        color: white;
    }

    .pdl_conts-input::-webkit-input-placeholder {
        color: #FFF;
        font-size: 0.14rem;
    }

    .pdls_btn {
        background: #01bf47;
        border: 0;
        color: #fff;
        border-radius: 0.5rem;
        font-size: 0.12rem;
        padding: 0.05rem 0.1rem;
        width: 30%;
        z-index: 10;
        opacity: 1;
    }
  .pdls_btn::placeholder{
    color: #fff;
  }

    .pdlog_two {
        width: 90%;
        margin: 0 auto;
    }

    .yf_submitBtn {
        background: #01bf47;
        border: 1px solid #01bf47;
        color: #fff;
        font-size: 0.14rem;
        width: 100%;
        padding: 0.1rem 0;
        border-radius: 0.05rem;
        outline: none;
    }

    .submitBtn {
        background: rgba(216, 216, 216, 0.4);
        border: 0;
        color: #fff;
        font-size: 0.14rem;
        width: 100%;
        padding: 0.1rem 0;
        border-radius: 0.05rem;
        outline: none;
    }
</style>
